<template>
	<view class="">
		<!--班级、管理按键开始 -->
		<scroll-view scroll-y class="page">
			<view class="nav-list " v-for="(item, index) in classList" :key="index">
				<!--左边班级框开始 -->
				<view hover-class="none" class="nav-li bg-blue">
					<view class="nav-name">{{ item.name }}</view>
					<text class="cuIcon-friend nav-text" @tap="showModal"  :data-target="'descModal-'+index"></text>
				</view>
				<!-- 左边班级框结束-->
				<!--右边管理框开始 -->
				<view class="nav-li-r bg-black grid gridBorder:border " >
					
				    <view class=" cuIcon-edit " @tap="showModal" :data-target="'modifyModal-'+index">
					</view>
					
				    <view class=" cuIcon-peoplelist" @tap="showList(index,item.id)">
					</view>					
																		
				    <view class="cuIcon-delete " @tap="showModal"  :data-target="'deleteModal-'+index">	
					</view>
									
					<view class=" cuIcon-share " @tap="showModal"  :data-target="'shareModal-'+index">
					</view>																				
				</view>
				<!-- 右边管理框结束-->
			</view>
			<!-- 空白条开始-->
			<view class="cu-tabbar-height"></view>
			<!--空白条结束 -->
		</scroll-view>
		<!--班级、管理按键结束 -->
		<!-- 课程详情控件开始-->
		<view class="cu-modal" :class="modalName=='descModal-'+index?'show':''"
		v-for="(item, index) in classList" :key="index" :data-target="index">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="margin-lr-xs content-ani">{{item.name}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
				课程详情:{{item.desc}}
				</view>

			</view>
		</view>
		<!--课程详情控件结束 -->
		<!-- 修改控件开始-->
		<view class="cu-modal" :class="modalName=='modifyModal-'+index?'show':''"
		v-for="(item, index) in classList" :key="index" :data-target="index">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="margin-lr-xs">{{item.name}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
			<!--<view class="cu-form-group">
				<view class="title">班级ID:{{item.id}}</view>
			</view>-->
			<view class="cu-form-group bg-gray">
				<text class="title">班名:{{item.name}}</text>	
			</view>
			<view class="cu-form-group">
				<view class="title">修改班级名称</view>
				<input placeholder="输入新的班级名称" name="input"
				:value="EditClassName" @input="EditClassNameChange"></input>				
			</view>
			<view class="cu-form-group bg-gray">
				<text class="title">课程描述:{{item.desc}}</text>	
			</view>
			<view class="cu-form-group">
				<view class="title">修改课程描述</view>
				<input placeholder="输入新的课程描述" name="input"
				:value="EditCLassDesc" @input="EditClassDescChange"></input>
			</view>
			<button class='cu-btn bg-blue shadow' @tap="clickEdit(item.id)"
			style="margin: 20upx;">确认修改</button>			
			</view>
		</view>
		<!--修改控件结束 -->
		<!--学生用户列表控开始-->
		<view class="cu-modal" :class="modalName=='userListModal-'+index?'show':''" 
		v-for="(item, index) in classList" :key="index" :data-target="index" 
		>		
		<view class="cu-dialog">
		<!--上部分开始-->
				<view class="cu-bar bg-white justify-between" >
					<view class="action" @tap="clickAddClass">
						<text :class="addClassShow? 'cuIcon-back_android':''"
						class=" text-red" ></text>
					</view>	
					<view class="margin-lr-xs" @tap="goTop">{{item.name}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
		<!--上部分结束-->		
				<!--列表页面开始 -->
				<view v-if="!addClassShow">
				<!--列表开始 -->
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" 
				@scroll="scroll">
				<view class="cu-list menu-avatar" >
					<view class="cu-item" :class="userListName=='move-box-'+ index2?'move-cur':''" v-for="(item2,index2) in userList" :key="index2"
					 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index2" >
						<view class="cu-avatar round lg" :style="[{backgroundImage:'url('+item2.avatarurl+')'}]"></view>
						<view class="content">
							<view class="text-grey">{{item2.nickname}}</view>
						</view>
						<!--<view class="text-grey">编号:{{item2.id}}</view>-->
						<!--滑动列表开始 -->	
						<view class="move">
							<view class="bg-red" @tap="clickDeleteStudent(item.id,item2.id)">删除</view>
						</view>
						<!--滑动列表结束 -->	
					</view>
				</view>
				</scroll-view>
				<!-- 列表结束-->	
				<!--添加用户开始-->
				<view class="cu-form-group foot">
					<view class="title content">添加学生</view>
					<button class='cu-btn bg-blue shadow' 
					@tap="clickAddClass">添加</button>
				</view>
				<!--添加用户结束-->
				</view>
				<!--列表页面结束-->
				<!--添加未分班学生开始 -->
				<view v-if="addClassShow">
					<scroll-view  scroll-y="true" class="scroll-Y">
					<checkbox-group class="block" @change="CheckboxChange">
					<view class="cu-list menu-avatar" >
						<view class="cu-item" 
						 v-for="(item3,index3) in notClassUserList" :key="index3">
							<view class="cu-avatar round lg" :style="[{backgroundImage:'url('+item3.avatarurl+')'}]"></view>
							<view class="content">
								<view class="text-grey">{{item3.nickname}}</view>
							</view>
							<!--<view class="text-grey content">编号:{{item3.id}}</view>-->
							<!--多选框开始 -->	
						<checkbox class="round blue" :value="item3.id"></checkbox>
							<!--多选框结束 -->	
						</view>
					</view>
					</checkbox-group>
					</scroll-view>
					<button class='cu-btn bg-blue shadow' style="margin: 20upx;"
					 @tap="clickAddUser(item.id)">添加</button>
				</view>
				<!--添加未分班学生结束 -->
			</view>				
			</view>
		<!--学生用户列表控件结束 -->
		
		<!-- 删除班级控件开始-->
		<view class="cu-modal" :class="modalName=='deleteModal-'+index?'show':''"
		v-for="(item, index) in classList" :key="index" :data-target="index">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="margin-lr-xs">{{item.name}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					确定删除班级？
				</view>
				<view class="cu-btn bg-blue shadow round margin-lr-xs"
				style="margin-bottom: 20upx;" @tap="clickDeleteClass(item.id)">确定</view>
				<view class="cu-btn bg-blue shadow round margin-lr-xs"
				style="margin-bottom: 20upx;" @tap="hideModal">取消</view>
			</view>
		</view>
		<!--删除班级控件结束 -->
		<!-- 分享控件开始-->
		<view class="cu-modal" :class="modalName=='shareModal-'+index?'show':''"
		v-for="(item, index) in classList" :key="index" :data-target="index">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="margin-lr-xs">{{item.name}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					邀请码：{{item.shareCode}}
				</view>
				<view class="cu-btn bg-blue shadow round" 
				style="margin-bottom: 20upx;"
				@tap="getShareCode(item.shareCode)"
				>复制</view>
			</view>
		</view>
		<!--分享控件结束 -->
	</view>
</template>

<script>
	export default {
		props: {
		  classList: Array,
		  cId:Number,
		  
		},	
		data() {
			return {
				modalName: null,//模拟框模型名称
				userListName:null,//用户列表滚动计算
				userList:[],
				values:null,
				EditClassName:null,
				EditCLassDesc:null,
				notClassUserList:[],//未分班学生用户组
				addClassShow:false,//添加班级的图层显示判断
				listTouchStart: 0,
				listTouchDirection: null,
				scrollTop: 0,
				old: {
					scrollTop: 0
				}					
			};
		},
		methods: {
			scroll: function(e) {
				//console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon:"none",
					title:"已返回顶部"
				})
			},
			// ListTouch触摸开始
			getShareCode(e)
			{
				//console.log("成功获取邀请码"+e)
				uni.setClipboardData({
				    data: e,
				    success: function () {
				        console.log('success');
				    }
				});
			},
			getUserList(id) {
				this.request({
					url: this.apiServer + '/class/findClassUserById?id='+id
				}).then(res => {
					console.log(res);
					this.userList =res.data;
				});
			},
			showList(index,id) {
				//console.log("id:"+id+"index:"+index)
				//:data-target="'userListModal-'+index"
				this.getUserList(id);
				this.modalName = "userListModal-"+index;	    
				
			},
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.userListName = e.currentTarget.dataset.target
				} else {
					this.userListName = null
				}
				this.listTouchDirection = null
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null;
				if(this.addClassShow)
				{
					this.addClassShow=!this.addClassShow;
				}
			},
			clickAddClass()//添加班级内，模拟框切换
			{
				this.addClassShow=!this.addClassShow;
				this.getNotClassList();
			},
			CheckboxChange(e) {//多选框
				this.values = e.detail.value;
				console.log(JSON.parse(JSON.stringify(this.values)));
				//var va = e.detail.value;
				//console.log(va);
			},
			clickAddUser(classID)
			{
				console.log("班级ID："+classID);
				//console.log(JSON.parse(JSON.stringify(this.values)));
				if(this.values!=null)
				{
					this.request({
						url:this.apiServer + '/class/addUsersToClass',
						method:'POST',
						data:{
							    "cId": classID,
							    "uIds":this.values,
						},				    
						header:{
							"Content-Type": "application/x-www-form-urlencoded"
						},
					}).then(res=>{
					console.log(res.data)
					//this.addClassShow=!this.addClassShow;
					//this.modalName=null;
					if(res.code==0)
					{
						this.getUserList(classID);
						this.addClassShow=!this.addClassShow;
						uni.showToast({
							title:"添加成功"
						})
					}
					else{
						this.addClassShow=!this.addClassShow;
						uni.showToast({
							title:"添加失败",
						    image:"../../static/icon/error.png"
						})
					}
					})
				}else{
					uni.showToast({
						title:"添加失败",
					    image:"../../static/icon/error.png"
					})
				}
			},
			clickEdit(EditId)
			{
				console.log("输入数据:"+this.EditClassName+" "+this.EditCLassDesc)
				if(this.EditCLassDesc!=null&&this.EditClassName!=null)
				{
					this.request({
						url:this.apiServer + '/class/updateClass',
						method:'PUT',
						data:{							    
								"id":EditId,
								"name":this.EditClassName,
								"desc":this.EditCLassDesc,
						},				    
						header:{
							"Content-Type": "application/x-www-form-urlencoded"
						},
					}).then(res=>{
					console.log(res.data)
					this.modalName=null;
					if(res.code==0)
					{
						this.$emit("getClassValues");
						uni.showToast({
							title:"修改成功"
						});	
					}
					else{
						uni.showToast({
							title:"修改失败",
						    image:"../../static/icon/error.png"
						})
					}
					})
				}else{
					
					uni.showToast({
						title:"修改失败",
					    image:"../../static/icon/error.png"
					})
				}
				this.EditCLassDesc=null;
				this.EditClassName=null;								
			},
			clickDeleteClass(EditId)
			{
				this.request({
					url:this.apiServer + '/class/deleteClassById?id='+EditId,
					method:'DELETE',	
				}).then(res=>{
				console.log(res.data)
				this.modalName=null;
				if(res.code==0)
				{
					this.$emit("getClassValues");
					uni.showToast({
						title:"删除成功"
					});				
				}
				else{
					uni.showToast({
						title:"删除失败",
					    image:"../../static/icon/error.png"
					})
				}
				
				})
			},
			clickDeleteStudent(classID,studentID)
			{
				console.log("班级ID："+classID+",用户ID："+studentID);
					this.request({
						url:this.apiServer + '/class/deleteUserToClassByUIdAndCId?uId='+studentID+'&cId='+classID,
						method:'DELETE',
					}).then(res=>{
						console.log(res.data)
						if(res.code==0)
						{
							this.getUserList(classID);
							this.getNotClassList();
							uni.showToast({
								title:"删除成功"
							});				
						}
						else{
							uni.showToast({
								title:"删除失败",
							    image:"../../static/icon/error.png"
							})
						}
					})
			},
			EditClassDescChange: function (e) {//储存修改班级课程描述
				this.EditCLassDesc = e.detail.value;
			},
			EditClassNameChange: function (e) {//储存修改班级课程名称
				this.EditClassName = e.detail.value;
			},
			getNotClassList() {
				//console.log(this.cId)
				this.request({
					url: this.apiServer + '/courses/findCoursesNotClassUserById?id='+this.cId
				}).then(res => {
					console.log(res);
					this.notClassUserList = res.data;
				});
			},
			
			
		},

	};
</script>

<style>
.page {
	margin-top: 50upx;
}
.nav-list {
	display: flex;
	flex-wrap: wrap;
	padding: 0px 40upx 0px;
	justify-content: space-between;
	border-bottom:solid 1px #ffffff;
}

.nav-li {
	padding: 28upx;
	border-radius: 12upx;
	width: 45%;
	margin: 20upx 2.5% 20upx;
	background-size: cover;
	background-position: center;
	position: relative;
	z-index: 1;
}

.nav-li-r {
	padding: 28upx;
	border-radius: 12upx;
	width: 45%;
	margin: 20upx 2.5% 20upx;
	background-size: cover;
	background-position: center;
	position: relative;
	z-index: 1;
}

.nav-li-r view{
	font-size: 40upx;
	margin: 0upx 40upx;

}
.nav-li::after{
	content: '';
	position: absolute;
	z-index: -1;
	background-color: inherit;
	width: 100%;
	height: 100%;
	left: 0;
	bottom: -10%;
	border-radius: 10upx;
	opacity: 0.2;
	transform: scale(0.9, 0.9);
}
.nav-li-r::after{
	content: '';
	position: absolute;
	z-index: -1;
	background-color: inherit;
	width: 100%;
	height: 100%;
	left: 0;
	bottom: -10%;
	border-radius: 10upx;
	opacity: 0.2;
	transform: scale(0.9, 0.9);
}
.nav-name {
	font-size: 28upx;
	text-transform: Capitalize;
	margin-top: 20upx;
	position: relative;
}

.nav-name::first-letter {
	font-weight: bold;
	font-size: 36upx;
	margin-right: 1px;
}

.nav-text{
	position: absolute;
	right: 10upx;
	bottom: 10upx;
	font-size: 52upx;
	width: 60upx;
	height: 60upx;
	text-align: center;
	line-height: 60upx;
}
.scroll-Y {
	height: 600rpx;
}
.scroll-view-item {
	height: 300rpx;
	line-height: 300rpx;
	text-align: center;
	font-size: 36rpx;
}
	
</style>
